<template>
	<div class="collageList flexv">
		<!-- 头部 -->
		<!-- 轮播图 -->
		<pubHead title="拼团中心"></pubHead>
		<div class="swiper_box flex" v-if="banners">
			<van-swipe class="swiper" :show-indicators="true" indicator-color="#FEA382" :autoplay="3000" :loop="true">
				<van-swipe-item class="flex" @click="toGoods(item)">
					<img :src="banners" alt="">
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 热卖商品 -->
		<van-list v-model="loading" :finished-text="finishedText" :finished="finished" @load="getHots">
			<!-- 拼团商品列表 -->
			<div class="group-lists flexv">
				<div class="group-list flex" v-for="(item,index) in groups" :key="index" @click="toPintuan(item)">
					<div class="group-img flex">
						<img :src="item.image" alt="">
					</div>
					<div class="flex1 goods-infos flexv jus-b">
						<p class="twoline goods_title">{{item.goods_name}}</p>
						<div class="group-info flex">
							<span class="type white">{{item.group_num}}人团</span>
							<span class="sales">已团 {{item.group_nums}}</span>
						</div>
						<div class="goods-fix jus-b">
							<p class="price ali-b">￥{{item.goods_price}}<span>￥{{item.line_price}}</span></p>
							<div class="btn tc white">去开团</div>
						</div>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Toast,
		List,
		Swipe,
		SwipeItem,
	} from 'vant';
	import {
		getGroupBuyGoods
	} from '@/request/api';
	import pubHead from '@/components/head';
	Vue.use(Toast, Swipe, SwipeItem, List)
	export default {
		data() {
			return {
				page: 0,
				pagesize: 50,
				groups: [], // 热卖
				banners: '',
				finishedText: '嘉瑞科技提供技术支持',
				finished: false,
				loading: false,
			}
		},
		components: {
			pubHead,
			"van-list": List,
			"van-swipe": Swipe,
			"van-swipe-item": SwipeItem,
		},
		created() {},
		methods: {
			// 获取当季热卖商品
			getHots() {
				this.$loading()
				getGroupBuyGoods({
					token: localStorage.getItem('token'),
					page: ++this.page,
					pagesize: this.pagesize
				}).then(res => {
					Toast.clear();
					if (res.code == 1) {
						// this.finished = Number(res.data.good_item.length) >= 10 ? false : true;
						this.finished = true
						if (res.data.list.length > 0) {
							this.groups = [...this.groups, ...res.data.list];
						}
						this.banners = res.data.ad.image
					} else {
						if (res.msg == '请登录后操作') {
							this.$tip('您的登录已失效,即将重新登录!');
							setTimeout(() => {
								localStorage.clear();
								// sessionStorage.clear();
								window.location.href = 'http://mbgo.0791jr.com';
							}, 1200)
						}
					}
				})
			},
			toPintuan(item){
				if(item.limit_discount_id)
				{
					this.$router.push('/collage?limit_discount_id=' + item.limit_discount_id+'&goods_id='+item.goods_id)
				}else{
					this.$router.push('/collage?id=' + item.id+'&goods_id='+item.goods_id+'&groupbuy_id='+item.groupbuy_id)
				}
			},
			toGoods(item) {}
		},


	}
</script>
<style lang="less" scoped>
	.collageList {
		min-height: 100vh;
		background: #f5f5f5;

		// 轮播图
		.swiper_box {
			height: 3rem;
			padding-top: 0.1rem;
			background-color: #fff;

			.swiper {
				width: calc(100% - 0.56rem);
				height: 100%;
				margin: 0 auto;
				border-radius: 0.1rem;
				background-color: #fff;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 热卖商品
		// 拼团商品列表
		.group-lists {
			margin-top: 0.1rem;
			background-color: #fff;

			.group-list {
				margin-top: 0.2rem;
				padding: 0.2rem;
				border-radius: 0.1rem;
				border: 1px solid #f5f5f5;

				.group-img {
					width: 2.1rem;
					height: 2.1rem;
					border-radius: 0.1rem;
					overflow: hidden;

					img {
						margin: auto;
					}
				}

				.goods-infos {
					margin-left: 0.2rem;

					.title {
						font-size: 0.26rem;
						line-height: 150%;
						color: #333;
					}

					.group-info {
						height: 0.36rem;
						margin-right: auto;
						border-radius: 0.18rem;
						border: 0.01rem solid #50AD22;
						font-size: 0.2rem;
						line-height: 0.34rem;
						overflow: hidden;

						.type {
							padding: 0 0.16rem;
							background-color: #50AD22;
						}

						.sales {
							padding: 0 0.16rem;
							color: #999;
						}
					}

					.goods-fix {
						font-size: 0.28rem;
						line-height: 120%;

						.price {
							margin-top: auto;
							color: #EE1C1A;

							span {
								margin-left: 0.12rem;
								font-size: 0.22rem;
								color: #999;
								text-decoration: line-through;
							}
						}

						.btn {
							width: 1.2rem;
							height: 0.5rem;
							border-radius: 0.25rem;
							background-color: #50AD22;
							line-height: 0.5rem;
						}
					}
				}
			}
		}
	}
</style>
